<template>
    <div class="container">
        <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 210" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" @onSelectionChange="onSelectionChange" />
        <div style="text-align:center;margin-top:20px;">
            <el-button @click="go('list')" size="mini">返回</el-button>
        </div>
    </div>
</template>

<script>


import { queryDatasByTableName } from '@/api/tzyy/sjkc'

export default {

    props: {
        rowData: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            loading: false,
            total: 0,
            queryObj: {
                pageNo: 1,
                pageSize: 20
            },
            tableColumns: [],
            tableDatas: []
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        getTableData() {
            this.loading = true
            this.tableColumns= []
            let parma = {
                tableName: this.rowData.tableName,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
            }
            queryDatasByTableName(parma).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                    let keyArr = Object.keys(this.tableDatas[0])
                    console.log(keyArr)
                    for (let i = 0; i < keyArr.length; i++) {
                        console.log(keyArr[i])
                        this.tableColumns.push({
                            label: keyArr[i] + '',
                            prop: keyArr[i] + '',
                            isShow: true,
                            align: 'center',
                            minWidth: 120
                        })
                    }
                }
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .vue-codemirror {
        // width: calc(100% - 35px);
        width: 100%;
        border: 1px solid #dcdfe6;
    }
}
</style>